<template>
	<div class="exam-detail">

		<AppHeader :title="workDetails.homework_resources_name" titleColor="#FFF"
			backgroundColor="linear-gradient(to bottom,#09A3F9,#06AAEE)" @leftClickEvent="handleHeaderLeft()">
			<template #left>
				<img src="@/assets/images/icon-arrow-left-white.png" width="9" height="18" />
			</template>
		</AppHeader>


		<div class="score-mine">{{ workDetails.score }}</div>
		<div class="score-rate">得分率 {{ workDetails.score_rate }}</div>

		<div class="score-detail" @scroll="scrollPage">
			<div class="score-item">
				<div class="score-top">
					<b class="highlight-green">{{ workDetails.score_class_high?.split("/")[0] }}</b>/{{
            workDetails.score_class_high?.split("/")[1] }}
				</div>
				<div class="score-bottom">班级最高分</div>
			</div>
			<div class="score-item">
				<div class="score-top">
					<b class="highlight-green">{{
            workDetails.score_class_average?.split("/")[0]
          }}</b>/{{ workDetails.score_class_average?.split("/")[1] }}
				</div>
				<div class="score-bottom">班级平均分</div>
			</div>
			<div class="score-item">
				<div class="score-top highlight-green">{{ workDetails.complete_num }}</div>
				<div class="score-bottom">完成人数</div>
			</div>
		</div>

		<div class="score-table">
			<div class="table-title">分数段分析</div>
			<div class="charts-box">
				<qiun-vue-ucharts type="column" :ontap="false" :opts="options" :chartData="chartData" />
			</div>
			<div class="total-item">
				<div class="score-name">总分</div>
				<div class="score-value highlight-green">{{ workDetails.full_score }}分</div>
			</div>
			<van-divider :style="{ borderColor: '#E5E5E5', margin: '15px 0' }" />
			<div class="total-item">
				<div class="score-name">作答用时</div>
				<div class="score-value">{{ workDetails.use_time }}</div>
			</div>
		</div>

		<div class="score-details">
			<!-- 	<div class="result-list">
				<div class="item" v-for="(item, i) in resultlist" :key="i">
					<img v-if="i === 0" src="@/assets/images/written/right.png" width="23" height="16" />
					<img v-if="i === 1" src="@/assets/images/written/error.png" width="18" height="18" />
					<img v-if="i === 2" src="@/assets/images/written/halfRight.png" width="26" height="16" />
					<img v-if="i === 3" src="@/assets/images/written/unknown.png" width="12" height="18" />
					<div class="t0">{{ item.name }}</div>
					<div class="t1">{{ item.num }} </div>
				</div>
			</div> -->

			<div class="work-details">
				<van-collapse v-model="activeNames" :border="false">
					<template v-for="(item, index) in workList" :key="index">
						<van-collapse-item :name="index">
							<template #title>
								<div class="titleleft">
									{{ item.templateSettings.content }}
									<!-- （<span><i>{{ item.score }}分</i>/{{item.totalScore }}分） </span> -->
									（<span>
										<i
											:class="autoScoreColor(questionStemScoreMy(item),questionStemScore(item))">{{ questionStemScoreMy(item) }}分</i>
										/{{questionStemScore(item) }}分）
									</span>
								</div>
							</template>
							<div v-if="item.templateSettings.infoRetail!=5">
								<div style="color: #000;font-size: 16px;margin: 10px;"
									v-for="(qItem,qIndex) in item.questions[0].trunk.body.split('\n')">{{ qItem }}</div>

								<div v-if="item.questions[0].trunk.attachments.length" style="margin: 10px 0;">
									<div v-for="(qTrunkItem,qTrunkIndex) in item.questions[0].trunk.attachments">
										<div v-if="qTrunkItem.fileType==1" style="margin: 10px 0;">
											<img :src="baseUrl+qTrunkItem.url" style="width: 100%;" />
										</div>
										<div v-if="qTrunkItem.fileType==2" style="margin: 10px 0;">
											<!-- <audio ref="audioElement" controls style="width: 100%;height: 30px;">
												<source :src="baseUrl+qTrunkItem.url" type="audio/ogg">
											</audio> -->
											<audioPlayer :audioSrc="baseUrl+qTrunkItem.url"></audioPlayer>
										</div>
									</div>
								</div>
							</div>

							<div class="list-item" v-for="(childItem, childIndex) in item.questions[0].children"
								:key="i">
								<Divider v-if="item.templateSettings.infoRetail!=5"></Divider>
								<div class="score">
									（<span
										:class="autoScoreColor(questionScoreMy(childItem),questionScore(childItem))">{{questionScoreMy(childItem) }}分</span>
									/{{ questionScore(childItem)}}分）
								</div>
								<div style="display: flex;align-items: center;margin: 5px 0;">
									<div style="margin-right: 10px;">完整度:
										<span
											:class="autoColor(childItem.integrityscore)">{{Math.round(childItem.integrityscore)}}</span>
									</div>
									<div style="margin-right: 10px;">流利度:
										<span
											:class="autoColor(childItem.fluencyscore)">{{Math.round(childItem.fluencyscore)}}</span>
									</div>
									<div style="margin-right: 10px;">准确度:
										<span
											:class="autoColor(childItem.accuracyscore)">{{Math.round(childItem.accuracyscore)}}</span>
									</div>
								</div>
								<div class="content" v-if="childItem.trunk.body">
									<div v-for="ctItem in childItem.trunk.body.split('\n')" style="margin: 10px 0;">
										{{ctItem}}
									</div>
									<!-- {{ childItem.trunk.body }} -->
								</div>
								<div v-if="childItem.trunk.attachments.length" style="margin: 10px 0;">
									<div v-for="(trunkItem,trunkIndex) in childItem.trunk.attachments">
										<div v-if="trunkItem.fileType==1" style="margin: 10px 0;">
											<img :src="baseUrl+trunkItem.url" style="width: 100%;" />
										</div>
										<div v-if="trunkItem.fileType==2" style="margin: 10px 0;">
											<audioPlayer :audioSrc="baseUrl+trunkItem.url"></audioPlayer>
											<!-- <audio ref="audioElement" controls style="width: 100%;height: 30px;">
												<source :src="baseUrl+trunkItem.url" type="audio/ogg">
											</audio> -->
										</div>
									</div>
								</div>

								<div class="title" v-if="childItem.recordUrl">我的录音</div>
								<!-- <audio v-if="childItem.recordUrl" ref="audioElement" controls
									style="width: 100%;height: 30px;margin-bottom: 10px;">
									<source :src="childItem.recordUrl" type="audio/ogg">
								</audio> -->
								<audioPlayer v-if="childItem.recordUrl" :audioSrc="childItem.recordUrl"></audioPlayer>
								<div class="title" v-if="childItem.answer">参考答案</div>
								<div :class="autoColor(childItem.totalScore)" v-if="childItem.answer">
									<div v-for="caItem in childItem.answer.split('\n')">{{caItem}}</div>
									<!-- {{childItem.answer }} -->
								</div>
							</div>
							<div class="title"  v-if="item.questions[0].textModule[0].questionStem!=''">听力原文</div>
							<div class="content" v-if="item.questions[0].textModule[0].questionStem!=''">
								<div
									v-for="questionStemItem in item.questions[0].textModule[0].questionStem.split('\n')">
									{{questionStemItem}}</div>

							</div>
						</van-collapse-item>
					</template>
				</van-collapse>
			</div>
		</div>

	</div>
	<AppLoading v-if="loading.page" />
</template>

<script setup>
	import {
		onMounted,
		onUnmounted,
		toRefs,
		computed,
		reactive,
		ref
	} from "vue";
	import {
		useRoute,
		useRouter
	} from "vue-router";
	import {
		showToast,
		Divider
	} from "vant";
	import qiunVueUcharts from "@qiun/vue-ucharts";
	import {
		request
	} from "@/api/request.js";
	import AppHeader from "@/components/AppHeader.vue";
	import audioPlayer from "@/components/audioPlayer/index.vue";
	import AppLoading from "@/components/AppLoading.vue";

	const route = useRoute();
	const router = useRouter();
	const activeNames = ref([]);
	const {
		id,
		versionId,
		mission_type
	} = route.query;
	const dataList = ref([])

	const score = ref([])
	const state = reactive({
		loading: {
			page: false,
		},
		baseUrl: '',
		workDetails: {},
		workList: [],
		chartData: {},
		options: {},
	});

	const resultlist = [{
			id: 1,
			name: "已做对",
			num: '0'
		},
		{
			id: 2,
			name: "已做错",
			num: '0'
		},
		{
			id: 3,
			name: "已半对",
			num: '0'
		},
		{
			id: 4,
			name: "已半对",
			num: '0'
		}
	];
	// const questionStemScore  //题型总分
	// const questionStemScoreMy  //我的题型总分
	// const questionScore  //题目总分
	// const questionScoreMy  //我的题目总分
	const questionStemScore = (item) => {
		let sumScore = 0
		for (var i = 0; i < item.questions[0].children.length; i++) {
			sumScore += item.questions[0].children[i].score
		}
		// Math.floor()
		return sumScore.toFixed(2)
	}
	const questionStemScoreMy = (item) => {
		let sumScore = 0
		for (var i = 0; i < item.questions[0].children.length; i++) {
			sumScore += item.questions[0].children[i].questionRefSorce
		}
		// Math.round()
		return sumScore.toFixed(2)
	}
	const questionScore = (item) => {
		// console.log(item)
		return item.score?item.score.toFixed(2):0
	}
	const questionScoreMy = (item) => {

		return item.questionRefSorce?item.questionRefSorce.toFixed(2):0
	}
	const handleHeaderLeft = () => {
		router.go(-1);
	};
	const scrollPage = (e) => {
		console.log(e)
	};

	const autoColor = (num) => {
		if (num < 60) {
			return 'autoRed' //#FA192C
		} else if (num > 60 && num < 80) {
			return 'autoYellow' //#FF9917
		} else if (num > 80) {
			return 'autoGreed' //#0CB76C
		}
	}
	const autoScoreColor = (my, all) => {
		if (my < all) {
			return 'autoRed' //#FA192C
		} else {
			return 'autoGreed' //#FF9917
		}
	}


	const fetchHomeworkData = ({
		id,
		versionId,
		mission_type
	}) => {
		request({
				url: "/api/homework/getStudentHomeworkListEveryStatistics",
				method: "post",
			}, {
				data: {
					homeworkid: id,
					versionId,
					mission_type,
				},
			})
			.then((res) => {
				if (res && +res.code === 1 && res.data) {
					const {
						score_arr,
						...data
					} = res.data;
					const scoreMax = Object.values(score_arr).sort((a, b) => b - a)[0];
					const yAxisMax = (5 - scoreMax % 5) + scoreMax;
					const chartParams = {
						categories: Object.keys(score_arr),
						series: [{
							name: "人数",
							data: Object.values(score_arr),
							color: "#0CB76C",
						}, ],
					};
					for (var i = 0; i < data.json.resource.items.length; i++) {
						const child = data.json.resource.items[i].questions[0];
						if (child.children.length == 0) {
							child.children = [{
								...child
							}];
						}
					}
					state.workDetails = data
					state.baseUrl = state.workDetails.json.resmain
					state.workList = state.workDetails.json.resource.items
					state.chartData = chartParams;
					state.options = {
						padding: [30, 15, 15, 5],
						legend: {
							show: false,
						},
						xAxis: {
							disableGrid: true,
							rotateLabel: true,
						},
						yAxis: {
							showTitle: true,
							data: [{
								min: 0,
								max: yAxisMax,
								title: "人数",
								titleOffsetX: -10,
								titleOffsetY: -10,
							}, ],
						},
						extra: {
							column: {
								type: "group",
								width: 12,
								activeBgColor: "#000000",
								activeBgOpacity: 0.08,
							},
						},
						ontap: false,
					};


				} else {
					showToast(res.msg);
				}
			})
			.catch((e) => {
				showToast(e.msg || (e.body && e.body.msg));
			})
			.finally(() => {
				state.loading.page = false;
			});
	};
	onMounted(() => {
		state.loading.page = true;
		fetchHomeworkData({
			id,
			versionId,
			mission_type,
		});
	});

	const {
		loading,
		baseUrl,
		workList,
		workDetails,
		chartData,
		options
	} = toRefs(state);
</script>

<style lang="scss" scoped>
	.exam-detail {
		width: 100%;
		height: 100%;
		background-image: url(../../assets/images/detail-banner.png);
		background-repeat: no-repeat;
		background-size: 375px 377px;
		background-position: top center;
		background-color: #f5f5f5;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0 10px;
		box-sizing: border-box;
		overflow: auto;
	}

	.score-mine {
		font-weight: 500;
		font-size: 66px;
		color: #ffffff;
		line-height: 92px;
		font-style: normal;
		margin-top: 118px;
		margin-bottom: 5px;
	}

	.score-rate {
		font-size: 18px;
		color: #ffffff;
		line-height: 25px;
	}

	.score-detail {
		margin-top: 33px;
		width: 355px;
		height: 104px;
		background: rgba(255, 255, 255, 0.6);
		border-radius: 15px 15px 0px 0px;
		display: flex;
		justify-content: space-evenly;
	}

	.score-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		padding: 20px 0;
		box-sizing: border-box;
	}

	.score-top {
		font-weight: 500;
		font-size: 24px;
		color: #8e8e8e;
		line-height: 40px;
		font-style: normal;
		margin-bottom: 7px;
	}

	.score-bottom {
		font-weight: 500;
		font-size: 12px;
		color: #8e8e8e;
		line-height: 17px;
		font-style: normal;
	}

	.score-table {
		width: 355px;
		background: #ffffff;
		border-radius: 15px;
		padding: 10px;
		box-sizing: border-box;
		margin-top: 10px;
		margin-bottom: 10px;
	}

	.table-title {
		font-weight: bold;
		font-size: 16px;
		color: #333333;
		line-height: 22px;
		font-style: normal;
	}

	.total-item {
		display: flex;
		justify-content: space-between;
	}

	.score-name {
		font-weight: 400;
		font-size: 16px;
		color: #333333;
		line-height: 22px;
		font-style: normal;
	}

	.score-value {
		font-weight: 500;
		font-size: 16px;
		color: #333333;
		line-height: 22px;
		font-style: normal;
	}

	.highlight-green {
		color: #0cb76c;
		font-weight: normal;
	}

	.highlight-red {
		color: #fa192c;
		font-weight: normal;
	}

	.charts-box {
		width: 337px;
		height: 255px;
	}

	.work-details {
		width: 355px;
		background: #ffffff;
		border-radius: 15px;
		// padding: 10px;
		box-sizing: border-box;
		margin-bottom: 10px;
	}

	.title-setting {
		font-weight: 500;
		font-size: 14px;
		color: #333333;
		line-height: 30px;
		text-align: left;
		font-style: normal;
	}

	.result-list {
		margin-bottom: 10px;
		font-size: 14px;
		padding: 20px 10px;
		border-radius: 15px;
		display: flex;
		border-bottom: 1px solid #E5E5E5;
		background-color: #ffffff;

		.item {
			flex: 1;
			text-align: center;

			.t0 {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 14px;
				color: #333333;
				line-height: 20px;
				font-style: normal;
				margin: 10px 0;
			}

			.t1 {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 14px;
				color: #333333;
				line-height: 20px;
				font-style: normal;
			}
		}
	}

	.titleleft {
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 16px;
		color: #333333;
		line-height: 22px;
		text-align: left;
		font-style: normal;

		span {
			color: #8E8E8E;

			i {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 12px;
				color: #FA192C;
				line-height: 22px;
				text-align: left;
				font-style: normal;
			}
		}
	}

	.title {
		margin: 20px 0;
		font-size: 16px;
		color: #8E8E8E !important;
		line-height: 25px;
		text-align: left;
	}

	.content {
		margin: 20px 0;
		font-size: 16px;
		color: #000000 !important;
		line-height: 25px;
		text-align: left;
	}

	.list-item {
		// padding: 0 15px;
		// margin-bottom: 20px;

		.text-blue {
			color: #0CB76C;
		}



		.score {
			margin-top: 5px;
		}

		.option {
			margin: 15px 0;

			.unchecked {
				display: inline-block;
				width: 30px;
				height: 30px;
				border: 1px solid #8E8E8E;
				border-radius: 50%;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 16px;
				color: #8E8E8E;
				text-align: left;
				font-style: normal;
				text-align: center;
				line-height: 28px;

				&.checked-blue {
					background: #0CB76C;
					color: #ffffff;
					border: 1px solid #0CB76C;
				}

				&.checked-red {
					background: #FA192C;
					color: #ffffff;
					border: 1px solid #FA192C;
				}
			}

			.option-item {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 18px;
				color: #8E8E8E;
				line-height: 25px;
				text-align: left;
				font-style: normal;
				margin-left: 15px;
			}
		}

		.answer {
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 12px;
			color: #8E8E8E;
			line-height: 16px;
			text-align: left;
			font-style: normal;
			border-bottom: 1px solid #e5e5e5;
			padding-bottom: 15px;
		}

		.explain {
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 12px;
			color: #8E8E8E;
			line-height: 16px;
			text-align: left;
			font-style: normal;
			padding-top: 15px;
			padding-bottom: 15px;
		}
	}

	.autoRed {
		color: #FA192C !important;
	}

	.autoYellow {
		color: #FF9917 !important;
	}

	.autoGreed {
		color: #0CB76C !important;
	}
</style>